<template>
  <div class="menu-manage">
    <!-- 搜索栏 -->
    <el-card class="filter-container" shadow="hover">
      <el-form :model="queryParams" ref="queryForm" :inline="true" class="search-form">
        <div class="search-row">
          <el-form-item label="关键字：" prop="keyword" class="keyword-item">
            <el-input
                v-model="queryParams.keyword"
                placeholder="菜单名称/路由地址/组件路径/权限标识"
                clearable
                class="keyword-input"
                @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item label="类型：" prop="menuType" class="type-item">
            <el-select v-model="queryParams.menuType" placeholder="类型" clearable class="type-select">
              <el-option label="目录" value="M" />
              <el-option label="菜单" value="C" />
              <el-option label="按钮" value="F" />
            </el-select>
          </el-form-item>
          <el-form-item label="禁用：" prop="status" class="status-item">
            <el-select v-model="queryParams.status" placeholder="状态" clearable class="status-select">
              <el-option label="否" value="0" />
              <el-option label="是" value="1" />
            </el-select>
          </el-form-item>
          <el-button-group class="search-button-group">
            <el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
            <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
          </el-button-group>
          <el-button 
            class="advanced-toggle" 
            :class="{ 'is-active': advanced }"
            @click="toggleAdvanced"
          >
            <el-icon><More /></el-icon>
            <span class="toggle-text">{{ advanced ? '收起' : '展开' }}</span>
          </el-button>
        </div>

        <!-- 高级搜索选项 -->
        <div v-if="advanced" class="advanced-search">
          <el-form-item label="外链：" prop="isFrame" class="advanced-item">
            <el-select v-model="queryParams.isFrame" placeholder="外链" clearable class="advanced-select">
              <el-option label="否" value="0" />
              <el-option label="是" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="缓存：" prop="cache" class="advanced-item">
            <el-select v-model="queryParams.cache" placeholder="缓存" clearable class="advanced-select">
              <el-option label="是" value="0" />
              <el-option label="否" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="显示：" prop="visible" class="advanced-item">
            <el-select v-model="queryParams.visible" placeholder="显示" clearable class="advanced-select">
              <el-option label="是" value="0" />
              <el-option label="否" value="1" />
            </el-select>
          </el-form-item>
        </div>
      </el-form>
    </el-card>

    <!-- 操作按钮区 -->
    <el-card class="menu-card" shadow="hover">
      <div class="toolbar-wrapper">
        <div class="left-toolbar">
          <el-button type="primary" :icon="Plus" class="add-btn" @click="handleAdd">添加菜单</el-button>
          <el-button
              :type="batchDeleteDisabled ? 'info' : 'danger'"
              :icon="Delete"
              :disabled="batchDeleteDisabled"
              class="delete-btn"
              @click="handleBatchDelete"
          >批量删除</el-button>
        </div>
      </div>

      <!-- 表格 -->
      <el-table
          v-loading="loading"
          :data="menuTable"
          row-key="id"
          border
          default-expand-all
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          @selection-change="handleSelectionChange"
          class="menu-table"
      >
        <el-table-column type="selection" width="50" align="center" />

        <el-table-column prop="meta.title" label="名称" min-width="180" align="left">
          <template #default="{ row }">
            <span class="menu-name">{{ row.meta.title }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="menuType" label="类型" width="80" align="center">
          <template #default="{ row }">
            <el-tag :type="getMenuTypeInfo(row.menuType).type" size="small">
              {{ getMenuTypeInfo(row.menuType).label }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="图标" width="60" align="center">
          <template #default="{ row }">
            <el-icon>
              <component :is="getMenuIcon(row.meta.icon)" />
            </el-icon>
          </template>
        </el-table-column>

        <el-table-column prop="path" label="路径" min-width="180" show-overflow-tooltip align="left" />

        <el-table-column prop="component" label="组件" min-width="180" show-overflow-tooltip align="left">
          <template #default="{ row }">
            <span v-if="row.component">{{ row.component }}</span>
            <span v-else-if="row.meta.link" class="link-type">
              {{ row.meta.link }}
            </span>
            <span v-else>-</span>
          </template>
        </el-table-column>

        <el-table-column prop="perms" label="后端权限" min-width="180" show-overflow-tooltip align="left" />

        <el-table-column prop="name" label="前端权限" min-width="180" show-overflow-tooltip align="left" />

        <el-table-column prop="orderNum" label="顺序" width="80" align="center" />

        <el-table-column label="操作" width="150" align="center">
          <template #default="{ row }">
            <el-button
                link
                type="primary"
                :icon="Edit"
                @click="handleEdit(row)"
            >
              编辑
            </el-button>
            <el-button
                link
                type="danger"
                :icon="Delete"
                @click="handleDelete(row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加/编辑菜单对话框 -->
    <el-dialog
        v-model="dialogVisible"
        :title="dialogTitle"
        width="650px"
        append-to-body
        destroy-on-close
        class="menu-dialog"
    >
      <el-form
          ref="menuFormRef"
          :model="menuForm"
          :rules="rules"
          label-width="100px"
      >
        <el-form-item label="上级菜单">
          <el-tree-select
              v-model="menuForm.parentId"
              :data="getParentMenuOptions()"
              check-strictly
              default-expand-all
              placeholder="选择上级菜单"
              clearable
          />
        </el-form-item>

        <el-form-item label="菜单类型" prop="menuType">
          <el-radio-group v-model="menuForm.menuType">
            <el-radio value="M">目录</el-radio>
            <el-radio value="C">菜单</el-radio>
            <el-radio value="F">按钮</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="菜单名称" prop="meta.title">
              <el-input v-model="menuForm.meta.title" placeholder="请输入菜单名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单图标" prop="meta.icon" v-if="menuForm.menuType !== 'F'">
              <el-select v-model="menuForm.meta.icon" placeholder="请选择图标" clearable>
                <el-option
                    v-for="icon in iconList"
                    :key="icon"
                    :label="icon"
                    :value="icon"
                >
                  <div class="icon-option">
                    <el-icon>
                      <component :is="icon" />
                    </el-icon>
                    <span>{{ icon }}</span>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="组件名称" prop="name">
              <el-input v-model="menuForm.name" placeholder="请输入组件名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="路由地址" prop="path">
              <el-input v-model="menuForm.path" placeholder="请输入路由地址" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="权限标识" prop="perms">
              <el-input v-model="menuForm.perms" placeholder="请输入权限标识" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示排序" prop="orderNum">
              <el-input-number v-model="menuForm.orderNum" :min="0" :max="999" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="外链地址" v-if="menuForm.menuType !== 'F'">
          <el-radio-group v-model="menuForm.isFrame" @change="handleMenuTypeChange">
            <el-radio value="0">否</el-radio>
            <el-radio value="1">是</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item v-if="showComponent && menuForm.menuType !== 'F'" label="组件路径">
          <el-input v-model="menuForm.component" placeholder="请输入组件路径" />
        </el-form-item>

        <el-form-item v-if="showLink && menuForm.menuType !== 'F'" label="链接地址">
          <el-input v-model="menuForm.meta.link" placeholder="请输入链接地址" />
        </el-form-item>

        <el-form-item label="重定向" v-if="menuForm.menuType === 'M'">
          <el-input v-model="menuForm.redirect" placeholder="请输入重定向地址" />
        </el-form-item>

        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="菜单状态" v-if="menuForm.menuType !== 'F'">
              <el-radio-group v-model="menuForm.status">
                <el-radio value="0">正常</el-radio>
                <el-radio value="1">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="显示状态" v-if="menuForm.menuType !== 'F'">
              <el-radio-group v-model="menuForm.visible">
                <el-radio value="0">显示</el-radio>
                <el-radio value="1">隐藏</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否缓存" v-if="menuForm.menuType === 'C'">
              <el-radio-group v-model="menuForm.meta.noCache">
                <el-radio :value="false">是</el-radio>
                <el-radio :value="true">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick, computed } from 'vue'
import { 
  Plus, 
  Edit, 
  Delete, 
  Search, 
  Refresh, 
  ArrowDown, 
  ArrowUp, 
  View, 
  Connection, 
  Menu as MenuIcon,
  Link, 
  Hide, 
  Setting,
  Check,
  Close,
  More
} from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import type { MenuListType } from '@/types/menu'

interface MenuFormData {
  id?: number
  name: string
  path: string
  hidden: boolean
  parentId?: number | null
  component?: string
  redirect?: string
  alwaysShow?: boolean
  meta: {
    title: string
    icon: string
    noCache: boolean
    link: string | null
    iframe: boolean
  }
  orderNum?: number
  menuType?: string // 菜单类型：M目录 C菜单 F按钮
  status?: string // 菜单状态：0正常 1停用
  perms?: string // 权限标识
  visible?: string // 显示状态：0显示 1隐藏
  isFrame?: string // 是否外链：0否 1是
}

// 数据加载状态
const loading = ref(false)
// 表格数据
const menuTable = ref<MenuListType[]>([])
// 树形表格数据
const treeMenuTable = ref<MenuListType[]>([])
// 选中数据
const multipleSelection = ref<MenuListType[]>([])
// 菜单图标列表
const iconList = ref([
  'Menu', 'Location', 'Setting', 'User', 'Phone', 'Document', 
  'Folder', 'Monitor', 'Link', 'Edit', 'List', 'Connection', 
  'HomeFilled', 'ChatLineSquare', 'Management', 'Briefcase',
  'Reading', 'Message', 'Service', 'Grid', 'DataAnalysis', 'Notebook'
])

// 是否显示菜单对话框
const dialogVisible = ref(false)
// 对话框标题
const dialogTitle = ref('添加菜单')
// 菜单表单ref
const menuFormRef = ref<FormInstance>()
// 菜单表单数据
const menuForm = reactive<MenuFormData>({
  name: '',
  path: '',
  hidden: false,
  parentId: null,
  component: '',
  redirect: '',
  alwaysShow: false,
  meta: {
    title: '',
    icon: 'Menu',
    noCache: false,
    link: null,
    iframe: false
  },
  orderNum: 0,
  menuType: 'C', // 默认为菜单类型
  status: '0',   // 默认正常状态
  perms: '',     // 权限标识
  visible: '0',  // 默认显示
  isFrame: '0'   // 默认非外链
})

// 查询条件
const queryParams = reactive({
  keyword: '', // 关键字：用于菜单名称、路由地址、组件路径、权限字符串
  menuType: '',
  status: '',
  isFrame: '',
  visible: '',
  cache: ''
})

// 高级搜索展开状态
const advanced = ref(false)

// 表单验证规则
const rules = reactive<FormRules>({
  name: [
    { required: true, message: '请输入组件名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在2到50个字符', trigger: 'blur' }
  ],
  path: [
    { required: true, message: '请输入菜单路径', trigger: 'blur' }
  ],
  'meta.title': [
    { required: true, message: '请输入菜单名称', trigger: 'blur' }
  ],
  'meta.icon': [
    { required: true, message: '请选择菜单图标', trigger: 'change' }
  ],
  menuType: [
    { required: true, message: '请选择菜单类型', trigger: 'change' }
  ],
  orderNum: [
    { required: true, message: '请输入显示顺序', trigger: 'blur' }
  ]
})

// 显示组件路径输入
const showComponent = ref(true)
// 显示外部链接输入
const showLink = ref(false)

// 模拟获取菜单数据
const getMenuList = async () => {
  loading.value = true
  try {
    // 这里应该替换为真实的API调用，并传递查询参数
    // const { data } = await getMenuListAPI(queryParams)
    
    // 模拟对菜单数据进行简单筛选
    const mockFullData: MenuListType[] = [
      {
        id: 1,
        name: 'System',
        path: '/system',
        hidden: false,
        component: 'Layout',
        alwaysShow: true,
        meta: {
          title: '系统管理',
          icon: 'Setting',
          noCache: false,
          link: null
        },
        menuType: 'M', // 目录
        status: '0', // 正常
        perms: 'system:manage', // 权限标识
        visible: '0', // 显示
        isFrame: '0', // 非外链
        orderNum: 1,
        children: [
          {
            id: 2,
            name: 'User',
            path: 'user',
            hidden: false,
            component: 'system/user/index',
            meta: {
              title: '用户管理',
              icon: 'User',
              noCache: false,
              link: null
            },
            menuType: 'C', // 菜单
            status: '0', // 正常
            perms: 'system:user:list', // 权限标识
            visible: '0', // 显示
            isFrame: '0', // 非外链
            orderNum: 1
          },
          {
            id: 3,
            name: 'Role',
            path: 'role',
            hidden: false,
            component: 'system/role/index',
            meta: {
              title: '角色管理',
              icon: 'Connection',
              noCache: false,
              link: null
            },
            menuType: 'C', // 菜单
            status: '0', // 正常
            perms: 'system:role:list', // 权限标识
            visible: '0', // 显示
            isFrame: '0', // 非外链
            orderNum: 2
          },
          {
            id: 4,
            name: 'Menu',
            path: 'menu',
            hidden: false,
            component: 'system/menu/index',
            meta: {
              title: '菜单管理',
              icon: 'Menu',
              noCache: false,
              link: null
            },
            menuType: 'C', // 菜单
            status: '0', // 正常
            perms: 'system:menu:list', // 权限标识
            visible: '0', // 显示
            isFrame: '0', // 非外链
            orderNum: 3,
            children: [
              {
                id: 8,
                name: 'MenuAdd',
                path: '',
                hidden: true,
                component: '',
                meta: {
                  title: '菜单新增',
                  icon: 'Menu',
                  noCache: false,
                  link: null
                },
                menuType: 'F', // 按钮
                status: '0', // 正常
                perms: 'system:menu:add', // 权限标识
                visible: '0', // 显示
                isFrame: '0', // 非外链
                orderNum: 1
              },
              {
                id: 9,
                name: 'MenuEdit',
                path: '',
                hidden: true,
                component: '',
                meta: {
                  title: '菜单编辑',
                  icon: 'Menu',
                  noCache: false,
                  link: null
                },
                menuType: 'F', // 按钮
                status: '0', // 正常
                perms: 'system:menu:edit', // 权限标识
                visible: '0', // 显示
                isFrame: '0', // 非外链
                orderNum: 2
              }
            ]
          }
        ]
      },
      {
        id: 5,
        name: 'Monitor',
        path: '/monitor',
        hidden: false,
        component: 'Layout',
        alwaysShow: true,
        meta: {
          title: '系统监控',
          icon: 'Monitor',
          noCache: false,
          link: null
        },
        menuType: 'M', // 目录
        status: '0', // 正常
        perms: 'monitor:manage', // 权限标识
        visible: '0', // 显示
        isFrame: '0', // 非外链
        orderNum: 2,
        children: [
          {
            id: 6,
            name: 'Online',
            path: 'online',
            hidden: false,
            component: 'monitor/online/index',
            meta: {
              title: '在线用户',
              icon: 'User',
              noCache: false,
              link: null
            },
            menuType: 'C', // 菜单
            status: '0', // 正常
            perms: 'monitor:online:list', // 权限标识
            visible: '0', // 显示
            isFrame: '0', // 非外链
            orderNum: 1
          },
          {
            id: 7,
            name: 'LoginLog',
            path: 'loginLog',
            hidden: false,
            component: 'monitor/loginLog/index',
            meta: {
              title: '登录日志',
              icon: 'Document',
              noCache: false,
              link: null
            },
            menuType: 'C', // 菜单
            status: '1', // 停用
            perms: 'monitor:loginLog:list', // 权限标识
            visible: '0', // 显示
            isFrame: '0', // 非外链
            orderNum: 2
          }
        ]
      }
    ]
    
    // 模拟基于关键字的搜索
    let filteredData = [...mockFullData]
    
    // 如果有关键字，则进行筛选
    if (queryParams.keyword) {
      const keyword = queryParams.keyword.toLowerCase()
      
      // 将树形结构展平为一维数组进行筛选
      const flatData: MenuListType[] = []
      const flatten = (items: MenuListType[]) => {
        items.forEach(item => {
          flatData.push({ ...item, children: undefined })
          if (item.children && item.children.length > 0) {
            flatten(item.children)
          }
        })
      }
      flatten(filteredData)
      
      // 使用关键字对菜单名称、路由地址、组件路径、权限标识进行筛选
      filteredData = flatData.filter(item => 
        item.meta.title.toLowerCase().includes(keyword) ||
        item.path.toLowerCase().includes(keyword) ||
        (item.component && item.component.toLowerCase().includes(keyword)) ||
        (item.perms && item.perms.toLowerCase().includes(keyword))
      )
    }
    
    // 应用其他筛选条件
    if (queryParams.menuType) {
      filteredData = filteredData.filter(item => item.menuType === queryParams.menuType)
    }
    
    if (queryParams.status) {
      filteredData = filteredData.filter(item => item.status === queryParams.status)
    }
    
    if (queryParams.isFrame) {
      filteredData = filteredData.filter(item => item.isFrame === queryParams.isFrame)
    }
    
    if (queryParams.visible) {
      filteredData = filteredData.filter(item => item.visible === queryParams.visible)
    }
    
    if (queryParams.cache) {
      const isCached = queryParams.cache === '0'
      filteredData = filteredData.filter(item => {
        if (item.meta.noCache === undefined) return false
        return item.meta.noCache === !isCached
      })
    }
    
    // 设置表格数据
    menuTable.value = filteredData
    // 生成树形结构数据
    generateTreeData()
  } catch (error) {
    console.error('获取菜单列表失败', error)
    ElMessage.error('获取菜单列表失败')
  } finally {
    loading.value = false
  }
}

// 生成树形表格数据
const generateTreeData = () => {
  // 将菜单数据展平为一维数组
  const flatMenus: MenuListType[] = []
  
  const flatten = (menus: MenuListType[]) => {
    menus.forEach(menu => {
      flatMenus.push(menu)
      if (menu.children && menu.children.length > 0) {
        flatten(menu.children)
      }
    })
  }
  
  flatten(menuTable.value)
  treeMenuTable.value = flatMenus
}

// 处理表单中的链接/组件切换显示
const handleMenuTypeChange = () => {
  if (menuForm.isFrame === '1') {
    showComponent.value = false
    showLink.value = true
    menuForm.component = ''
  } else {
    showComponent.value = true
    showLink.value = false
    menuForm.meta.link = null
    menuForm.meta.iframe = false
  }
}

// 添加菜单
const handleAdd = (parentId?: number) => {
  resetForm()
  dialogTitle.value = '添加菜单'
  dialogVisible.value = true
  
  if (parentId) {
    menuForm.parentId = parentId
  }
}

// 编辑菜单
const handleEdit = (row: MenuListType) => {
  resetForm()
  dialogTitle.value = '编辑菜单'
  dialogVisible.value = true
  
  nextTick(() => {
    // 复制行数据到表单
    Object.assign(menuForm, {
      id: row.id,
      name: row.name,
      path: row.path,
      hidden: row.hidden,
      component: row.component,
      redirect: row.redirect,
      alwaysShow: row.alwaysShow,
      meta: { ...row.meta },
      menuType: row.menuType || 'C',
      status: row.status || '0',
      perms: row.perms || '',
      visible: row.visible || '0',
      isFrame: row.isFrame || '0',
      orderNum: row.orderNum || 0
    })
    
    // 处理表单中的链接/组件切换显示
    handleMenuTypeChange()
  })
}

// 删除菜单
const handleDelete = (row: MenuListType) => {
  ElMessageBox.confirm(
    `确定要删除菜单"${row.meta.title}"吗？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 这里应该调用删除API
    // await deleteMenuAPI(row.id)
    ElMessage.success('删除成功')
    getMenuList()
  }).catch(() => {
    // 取消删除
  })
}

// 重置查询条件
const resetQuery = () => {
  queryParams.keyword = ''
  queryParams.menuType = ''
  queryParams.status = ''
  queryParams.isFrame = ''
  queryParams.visible = ''
  queryParams.cache = ''
  handleQuery()
}

// 切换高级搜索状态
const toggleAdvanced = () => {
  advanced.value = !advanced.value
}

// 查询菜单
const handleQuery = () => {
  getMenuList()
}

// 表单提交
const submitForm = async () => {
  if (!menuFormRef.value) return
  
  await menuFormRef.value.validate(async (valid) => {
    if (valid) {
      // 提交表单
      if (menuForm.id) {
        // 更新菜单
        // await updateMenuAPI(menuForm)
        ElMessage.success('更新成功')
      } else {
        // 新增菜单
        // await addMenuAPI(menuForm)
        ElMessage.success('添加成功')
      }
      
      dialogVisible.value = false
      getMenuList()
    }
  })
}

// 重置表单
const resetForm = () => {
  if (!menuFormRef.value) return
  menuFormRef.value.resetFields()
  
  // 重置表单数据到默认值
  Object.assign(menuForm, {
    id: undefined,
    name: '',
    path: '',
    hidden: false,
    parentId: null,
    component: '',
    redirect: '',
    alwaysShow: false,
    meta: {
      title: '',
      icon: 'Menu',
      noCache: false,
      link: null,
      iframe: false
    },
    orderNum: 0,
    menuType: 'C', // 默认为菜单类型
    status: '0',   // 默认正常状态
    perms: '',     // 权限标识
    visible: '0',  // 默认显示
    isFrame: '0'   // 默认非外链
  })
  
  showComponent.value = true
  showLink.value = false
}

// 获取菜单图标
const getMenuIcon = (icon: string) => {
  return icon || 'Menu'
}

// 获取父菜单列表，用于选择父菜单
const getParentMenuOptions = () => {
  // 过滤掉当前编辑的菜单
  return treeMenuTable.value
    .filter(item => !menuForm.id || item.id !== menuForm.id)
    .map(item => ({
      value: item.id,
      label: item.meta.title
    }))
}

// 表格多选
const handleSelectionChange = (selection: MenuListType[]) => {
  multipleSelection.value = selection
}

// 批量删除
const handleBatchDelete = () => {
  if (multipleSelection.value.length === 0) {
    ElMessage.warning('请至少选择一条记录')
    return
  }
  
  const ids = multipleSelection.value.map(item => item.id)
  const names = multipleSelection.value.map(item => item.meta.title).join('、')
  
  ElMessageBox.confirm(
    `确定要删除选中的 ${multipleSelection.value.length} 条菜单记录吗？\n${names}`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 这里应该调用批量删除API
    // await batchDeleteMenuAPI(ids)
    ElMessage.success('批量删除成功')
    getMenuList()
  }).catch(() => {
    // 取消删除
  })
}

// 获取菜单类型文本和样式
const getMenuTypeInfo = (type: string) => {
  const typeMap: Record<string, { label: string, type: string }> = {
    'M': { label: '目录', type: 'primary' },
    'C': { label: '菜单', type: 'warning' },
    'F': { label: '按钮', type: 'success' }
  }
  return typeMap[type] || { label: '未知', type: 'info' }
}

// 判断批量删除按钮状态
const batchDeleteDisabled = computed(() => {
  return multipleSelection.value.length === 0
})

// 组件挂载时获取菜单列表
onMounted(() => {
  getMenuList()
})
</script>

<style scoped>
.menu-manage {
  padding: 0;
}

.filter-container {
  margin-bottom: 16px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 0;
}

.search-form {
  display: flex;
  flex-direction: column;
  padding: 8px 8px;
}

.search-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.search-form :deep(.el-form-item) {
  margin-bottom: 0;
  margin-right: 6px;
}

.search-form :deep(.el-form-item__label) {
  font-size: 15px;
  font-weight: 500;
  line-height: 32px;
  height: 32px;
}

.search-form :deep(.el-form-item__content) {
  line-height: 32px;
  display: flex;
  align-items: center;
}

.search-form :deep(.el-input__inner),
.search-form :deep(.el-input__wrapper) {
  height: 32px;
  line-height: 32px;
}

.keyword-item {
  margin-left: 2px;
}

.keyword-input {
  width: 300px;
}

.type-select, .status-select, .advanced-select {
  width: 110px;
}

.search-button-group {
  margin-left: 0;
  margin-right: 8px;
}

.advanced-toggle {
  height: 32px;
  padding: 0 10px;
  border: 1px solid #dcdfe6;
  background-color: white;
  color: #606266;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  transition: all 0.3s;
}

.advanced-toggle:hover {
  border-color: #409EFF;
  color: #409EFF;
}

.advanced-toggle.is-active {
  border-color: #409EFF;
  color: #409EFF;
  background-color: #ecf5ff;
}

.advanced-toggle :deep(.el-icon) {
  font-size: 16px;
  margin-right: 4px;
  transform: rotate(90deg); /* Rotate the icon to make dots appear vertical */
}

.toggle-text {
  font-size: 14px;
}

.advanced-search {
  display: flex;
  align-items: center;
  margin-top: 12px;
  flex-wrap: wrap;
}

.advanced-item {
  margin-top: 0;
  margin-right: 6px;
}

.menu-card {
  margin-bottom: 16px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.toolbar-wrapper {
  margin-bottom: 16px;
}

.left-toolbar {
  display: flex;
  gap: 5px;
  align-items: center;
}

.add-btn {
  margin-right: 0;
}

.delete-btn {
  margin-left: 0;
}

.menu-name {
  font-weight: 500;
  color: #000;
}

.menu-table {
  border-radius: 8px;
  overflow: hidden;
}

.link-type {
  display: inline-flex;
  align-items: center;
  color: #000;
}

.icon-option {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--el-border-color-light);
}

/* 按钮样式加深 */
:deep(.el-button) {
  --el-button-font-weight: 500;
}

:deep(.el-button--primary) {
  --el-button-bg-color: #1867c0;
  --el-button-border-color: #1867c0;
  --el-button-hover-bg-color: #1f74d3;
  --el-button-hover-border-color: #1f74d3;
}

:deep(.el-button--danger) {
  --el-button-bg-color: #d83232;
  --el-button-border-color: #d83232;
  --el-button-hover-bg-color: #e04545;
  --el-button-hover-border-color: #e04545;
}

/* 表格样式优化 */
:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
  font-size: 13px;
}

:deep(.el-table__header) {
  background-color: #f5f7fa;
}

:deep(.el-table__header th) {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 500;
  height: 50px;
  text-align: left;
  font-size: 13px;
}

:deep(.el-table__header th .cell) {
  padding-left: 10px;
}

:deep(.el-table__row) {
  height: 54px;
  color: #000;
}

:deep(.el-table__row:hover) {
  background-color: #f5f7fa;
}

:deep(.el-table__row td.el-table__cell) {
  color: #000;
}

:deep(.el-table .cell) {
  color: #000;
  line-height: 1.5;
}

:deep(.el-table__column-filter-trigger) {
  color: #000;
}

:deep(.el-tag--primary) {
  --el-tag-bg-color: #e8f4ff;
  --el-tag-border-color: #a6d5ff;
  --el-tag-text-color: #1867c0;
}

:deep(.el-tag--warning) {
  --el-tag-bg-color: #fdf6ec;
  --el-tag-border-color: #f3d19e;
  --el-tag-text-color: #e6a23c;
}

:deep(.el-tag--success) {
  --el-tag-bg-color: #f0f9eb;
  --el-tag-border-color: #a6ce8b;
  --el-tag-text-color: #67c23a;
}

/* 操作按钮样式 */
:deep(.el-button--text) {
  padding: 4px 8px;
}

:deep(.el-button--primary.is-text) {
  color: #1867c0;
}

:deep(.el-button--danger.is-text) {
  color: #d83232;
}

/* 对话框样式 */
.menu-dialog :deep(.el-dialog) {
  border-radius: 12px;
  overflow: hidden;
}

.menu-dialog :deep(.el-dialog__header) {
  background-color: #f8fafc;
  padding: 16px 20px;
  margin: 0;
  border-bottom: 1px solid #ebeef5;
}

.menu-dialog :deep(.el-dialog__body) {
  padding: 20px 30px;
}

.menu-dialog :deep(.el-dialog__footer) {
  padding: 16px 20px;
  border-top: 1px solid #ebeef5;
}

/* 响应式处理 */
@media (max-width: 1200px) {
  .el-form--inline .el-form-item {
    margin-right: 10px;
  }
}

@media (max-width: 768px) {
  .el-form--inline .el-form-item {
    display: block;
    margin-right: 0;
    margin-bottom: 10px;
  }
}
</style>